<template>
  <div>
    <el-card class="box-card" style="position:relative;">
      <el-date-picker v-model="daterange" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :editable="false"
        style="position:absolute;right:18px;top:18px;z-index:999;width:240px;" @change="fetchData" />
      <el-select v-model="platform" size="mini" placeholder="请选择渠道"
        style="position:absolute;right:268px;top:18px;z-index:999;width:120px;" @change="fetchData">
        <el-option label="不限渠道" value="" />
        <el-option v-for="(item, index) in platformOptions" :key="index" :label="item.name" :value="item.id" />
      </el-select>
      <div id="resume_add_line" :style="'height: ' + height + ';'" />
    </el-card>
  </div>
</template>

<script>
  import {
    resumeOverviewResumeAdd
  } from '@/api/stat'
  import echarts from 'echarts'

  export default {
    props: ['height', 'platformOptions'],
    data() {
      return {
        platform: '',
        daterange: [],
        charts: ''
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.drawChart('resume_add_line')
      })
    },
    created() {
      this.fetchData(null, true)
    },
    methods: {
      fetchData(e, init = false) {
        if (init === false) {
          this.charts.showLoading()
        }
        const params = {
          utype: 1,
          daterange: this.daterange,
          platform: this.platform
        }
        resumeOverviewResumeAdd(params).then(response => {
          this.charts.setOption({
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: response.data.xAxis
            },
            series: [{
                name: '新增个人会员',
                type: 'line',
                smooth: true,
                data: response.data.series[0]
              },
              {
                name: '新增简历数',
                type: 'line',
                smooth: true,
                data: response.data.series[1]
              }
            ]
          })
          this.charts.hideLoading()
        })
      },
      drawChart(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.showLoading()
        this.charts.setOption({
          title: {
            text: '生命周期客户统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新增个人会员', '新增简历数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '新增个人会员',
              type: 'line',
              data: [],
            smooth: true,
            lineStyle: {
                color: '#3aa1ff'
              },
              itemStyle: {
                color: '#3aa1ff'
              }
            },
            {
              name: '新增简历数',
              type: 'line',
              data: [],
              smooth: true,
              lineStyle: {
                color: '#f2637b'
              },
              itemStyle: {
                color: '#f2637b'
              }
            }
          ]
        })
      }
    }
  }
</script>
